<template>
  <div class="sphere">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      </el-breadcrumb>
      <h3 style="margin: 20px 0;">评论管理</h3>

<!--      <el-autocomplete-->
<!--          v-model="state"-->
<!--          :fetch-suggestions="querySearchAsync"-->
<!--          placeholder="请输入内容"-->
<!--          @select="handleSelect">-->
<!--      </el-autocomplete>-->

      <!--// :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
      <el-button style="margin: 20px 0;" type="primary" @click="batchDelect" :disabled="this.sels.length === 0">批量删除
      </el-button>
    </div>


    <div class="TableList">
      <!--// 绑定事件 selection-change 当选择项发生变化时会触发该事件 -->
      <el-table :data="tableData" align="center" border @selection-change="handleSelectionChange">
        <!--// 选框 -->
        <el-table-column type="selection" width="40"></el-table-column>
        <!--// 列表 -->
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column  prop="avatar" label="用户头像" width="150">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.avatar"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="nick" label="评论用户" header-align="center" align="center"></el-table-column>
<!--        <el-table-column prop="username" label="回复用户" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="title" label="文章标题" header-align="center" align="center"></el-table-column>
        <el-table-column prop="content" label="评论内容" header-align="center" align="center"></el-table-column>
        <el-table-column prop="gmtCreate" label="评论时间" width="180" align="center"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#cccccc"
                :active-value="1"
                :inactive-value="0"
                @change="handleChangeEnable(scope.$index, scope.row.id, scope.row.enable)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button circle icon="el-icon-delete" size="mini" type="danger"
                       @click="openDeleteConfirm(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>



    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      state:'',
      tableData: [],//表格数据
      sels: [], //当前选框选中的值
      url: "",
      srcList: []
    };
  },
  methods: {

    //获取后端数据的接口
    loadAll() {
      let that = this
      that.$axios.get(that.baseURL+'http://localhost:9090/comment')
          .then(function(res){
            if (res.data.code===1){
              that.tableData = res.data.data
              // console.log(res.data.data)
            }else{
              // 失败的提示
              that.$message.error(res.data.msg)
            }
          })
          .catch(function(err){
            console.log(err)
          })
    },

    querySearchAsync(queryString, cb) {
      var tableData = this.tableData;
      var results = queryString ? tableData.filter(this.createStateFilter(queryString)) : tableData;
      cb(results);

    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
      };
    },
    handleSelect(item) {
      console.log(item);
    },


    //获取选中的值
    handleSelectionChange(sels) {
      this.sels = sels;
      console.log("选中的值", sels.map((item) => item.id));
    },
    //删除提示
    openDeleteConfirm(id) {
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(id);
      }).catch(() => {
      });
    },

    handleDelete: function (id) {
      console.log('将删除id=' + id + "的评论数据……");
      let url = 'http://localhost:9090/comment/' + id + '/delete';
      this.axios.post(url).then((response) => {
        let json = response.data;
        if (json.code == 20000) {
          this.$message({
            message: '删除评论成功！',
            type: 'success'
          });
        } else {
          this.$message.error(response.data.message);
        }
        this.loadBrands();
      })
    },
//修改状态
    handleChangeEnable(i, id, toState) {
      let url = 'http://localhost:9090/comment/' + id + '/updateStatus';
      this.axios.get(url).then((response)=>{

      })

    },


    //批量删除执行操作
    batchDelect(sels) {
      // 删除前的提示
      this.$confirm("确认删除评论吗?", "提示", {
        type: "warning",
      }).then(() => {
        let ids = this.sels.map((item) => item.id);


        let url = 'http://localhost:9090/comment/deletes';
        this.axios.post(url, ids).then((response) => {

          let json = response.data;

          if (json.code == 200) {
            this.$message({
              message: '删除评论成功！',
              type: 'success'
            });
          } else {
            this.$message.error(response.data.message);
          }
          this.loadBrands();
        });
      });
    },

//获取列表
    loadBrands: function () {
      console.log('loadBrands()');
      let url = 'http://localhost:9090/comment';
      console.log('url = ' + url);
      this.axios({
        type: "url",
        dataType: "json",
      })
      this.axios
          // .create({headers: {'Authorization': localStorage.getItem('jwt')}})-->
          .get(url).then((response) => {
          console.log(response);
        let json = response.data;
        if (json.code == 200) {

          this.tableData = json.data;

        } else {
          this.$message.error(response.data.message);
        }
      });
    }
  },

  created() {

  },
  mounted() {
    // mounted >>> 已挂载，将在created之后、显示页面之前执行-->
    console.log('vue mounted');
    this.loadBrands();
    this.loadAll();
  }
}
</script>










